<template>
  <!-- 公文办理 -->
  <div class="w-bg">
    <!-- 顶部分类 -->
    <div class="top-category">
      <!-- 我的待办 我的已办 -->
      <div class="category-title">
        <div
          v-for="(item, i) in categoryArr"
          :key="i"
          :class="['title-item', state.categoryActive === i ? 'title-active' : '']"
          @click="onChangeCategory(i)"
          >{{ item }}</div
        >
      </div>
      <!-- 办 阅 -->
      <div class="category-type">
        <!-- <span
          v-for="(item, i) in typeArr"
          :key="i"
          :class="['type-item', state.typeActive === i ? 'type-active' : '']"
          @click="onChangeType(i)"
        >
          <span>{{ item }}</span>
        </span> -->
      </div>
    </div>

    <!-- 分类内容区 -->
    <div class="type-content">
      <HandleList v-if="state.categoryActive === 0" :categroy-val="state.categoryActive" />

      <HandleList v-else-if="state.categoryActive === 1" :categroy-val="state.categoryActive" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import HandleList from './components/handleList/index';
const categoryArr = reactive(['我的待办', '我的已办']);
const typeArr = ref(['待办', '待阅']);
const state = reactive({
  categoryActive: 0,
  typeActive: 0,
  themecolor: sessionStorage.getItem('primaryColor')
});
onMounted(() => {
  // console.log(sessionStorage.getItem('startingActives'), 90909);
  if (sessionStorage.getItem('startingActives')) {
    state.categoryActive = sessionStorage.getItem('startingActives') * 1;
  }
});
function onChangeCategory(categoryVal) {
  if (state.categoryActive === categoryVal) {
    return;
  } else {
    state.categoryActive = categoryVal;
    // onChangeType(0);
  }

  // if (categoryVal === 0) {
  //   typeArr.value = ['待办', '待阅'];
  // } else {
  //   typeArr.value = ['已办', '已阅'];
  // }
}
// function onChangeType(typeVal) {
//   if (state.typeActive === typeVal) {
//     return;
//   } else {
//     state.typeActive = typeVal;
//   }
// }
</script>
<style lang="less" scoped>
@import './index.less';
</style>
